<template>
    <view>
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 地址 -->
        <view class="address">
            <view class="address-img">
                <image :src="imgUrl + '/imgs/submitOrder/' + (userAddress.take_phone ? 'have_data' : 'not_data') + '.png'"></image>
            </view>
            <view class="address-info">
                <view class="address-info-np" v-if="userAddress.take_phone">
                    <view class="address-info-np-name">{{ userAddress.take_name }}</view>
                    <view class="address-info-np-phone">{{ userAddress.take_phone }}</view>
                </view>
                <view class="address-info-detail" v-if="userAddress.take_phone">
                    {{ userAddress.take_address }}
                </view>
            </view>
        </view>

        <view class="but">
            <van-tabs swipe-threshold="3" color="#FFDC8D" :active="index" @change="selectLabel" v-if="logisticsData.list.length > 0">
                <van-tab :title="'包裹' + (index + 1)" :name="index" v-for="(item, index) in logisticsData.list" :key="index"></van-tab>
            </van-tabs>
            <view class="but-bg-hr" v-if="logisticsData.list.length > 0"></view>
            <view class="logistics" @tap="getLogistics" v-if="logisticsData.list.length > 0">
                <view class="logistics-img">
                    <image :src="imgUrl + '/imgs/user/logistics_icon.png'"></image>
                </view>
                <view class="logistics-info">
                    <view class="logistics-info-np">
                        <view class="logistics-info-np-name">{{ logisticsData.traces.AcceptStation }}</view>
                    </view>
                    <view class="logistics-info-detail">
                        {{ logisticsData.traces.AcceptTime }}
                    </view>
                </view>
                <view class="logistics-img-select">
                    <image :src="imgUrl + '/imgs/user/logistics_select.png'"></image>
                </view>
            </view>
            <view class="order-item">
                <view class="order-item-head">
                    <view class="order-item-time">下单时间：{{ order.create_date }}</view>
                </view>
                <view class="order-item-layer" v-for="(itemx, index) in order.items" :key="index">
                    <view class="order-item-img" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">
                        <image mode="aspectFill" :src="itemx.goods_img"></image>
                    </view>

                    <view class="order-item-info">
                        <view class="order-item-info-title" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">{{ itemx.goods_title }}</view>
                        <view class="order-item-info-pn">
                            <view class="order-item-info-pn-price">
                                <span class="tip">¥</span>
                                {{ itemx.goods_price }}
                            </view>
                            <view class="order-item-info-pn-number">
                                <span class="tip">X</span>
                                {{ itemx.goods_number }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-info-div-price">
                    <view class="order-item-total">
                        <view>
                            合计：
                            <span>¥{{ order.order_total }}</span>
                        </view>
                    </view>
                    <view class="order-item-goods">
                        <view>
                            共
                            <span>{{ order.goods_number }}</span>
                            件商品
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="end"></view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';

const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber,
    
    },
    data() {
        return {
            navbarData: {
                title: '订单详情' //顶部标题
            },

            //导航栏
            imgUrl: Config.imgUrl,

            //图片url
            order: {
                create_date: '',
                items: [],
                order_total: '',
                goods_number: ''
            },

            //订单详情
            userAddress: {
                take_phone: false,
                take_name: '',
                take_address: ''
            },

            order_id: '',
            butCheck: '111',
            index: 0,
            logisticsData: [],
            AcceptStation: '',
            AcceptTime: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var id = options.id;
        this.setData({
            order_id: id
        });
        this.orderDetail(id);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.orderDetail(this.order_id);
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getLogistics(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var logistics_id = this.logisticsData.list[this.index].id;
            console.log(logistics_id);
            uni.navigateTo({
                url: '/pages/user/order/logistics/index?id=' + this.order_id + '&index=' + this.index + '&lid=' + logistics_id
            });
        },

        selectLabel(event, _dataset) {
            
            if (!event.currentTarget) {
                if (_dataSet.tagId) {
                    event.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    event.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var index = event.detail.index;
            this.setData({
                index: index
            }); //选择项

            var logistics_id = this.logisticsData.list[index].id;
            var json = {
                id: this.order_id,
                logistics_id: logistics_id
            };
            Api.userOrderDetail(json).then((res) => {
                if (res.code == 1) {
                    var data = res.data;
                    this.setData({
                        logisticsData: data.logistics
                    });
                } else {
                    uni.showToast({
                        title: '订单信息有误',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        orderDetail(id) {
            // 订单详情
            var json = {
                id: id
            };
            Api.userOrderDetail(json).then((res) => {
                if (res.code == 1) {
                    var data = res.data;
                    var user_address = {
                        take_name: data.take_name,
                        take_address: data.take_address,
                        take_phone: data.take_phone
                    };
                    this.setData({
                        order: data,
                        logisticsData: data.logistics,
                        userAddress: user_address
                    });
                } else {
                    uni.showToast({
                        title: '订单信息有误',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        goodsDetail(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            console.log('占位：函数 goodsDetail 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
